<template>
    <div class="tmpl">
        <nav-bar title="搜索"></nav-bar>

        <div class="page-search">
            <mt-search v-model="value" :result="filterResult"></mt-search>
            <!--<input type="text" name=""/>-->
        </div>

    </div>
</template>

<script>

    export default {
        name: "search",
        data() {
            return {
                value: '',
                defaultResult: [
                    'Apple',
                    'Banana',
                    'Orange',
                    'Durian',
                    'Lemon',
                    'Peach',
                    'Cherry',
                    'Berry',
                    'Core',
                    'Fig',
                    'Haw',
                    'Melon',
                    'Plum',
                    'Pear',
                    'Peanut',
                    'Other'
                ]
            };
        },

        computed: {
            filterResult() {
                return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value));
            }
        }
    }
</script>

<style>
    .page-search {
        height: 200%;
        margin-top: 20px;
    }

    input[type='search'] {
        font-size: 16px;
        box-sizing: border-box;
        height: 24px;
        text-align: center;
        border: 0;
        border-radius: 6px;
        background-color: white;
        margin-top: 10px;
    }
</style>